<template>
	<view class="bg-gray">
		<view class="width">
			<view class="bg-white commonbg flex-row-between topinfo">
				<view class="flex-row-start font15">
					<image src="https://www.haopengsong.xyz/static/weixiu/home.png" mode="widthFix" class="home"></image>
					岭尚小区
				</view>
			</view>
			<view class="bg-white boxin">
				<view class="flex-row-between boxitem">
					住户手机号
					<input class="uni-input" v-model='tel' placeholder="请输入" />
				</view>
				<view class="flex-row-between boxitem">
					住户姓名
					<input class="uni-input" v-model='name' placeholder="请输入" />
				</view>
				<view class="flex-row-between boxitem">
					选择身份
					<view class="flex-row-between">
						<view 
							class="tab"
							@click="tabIndex = index"
							:class="tabIndex == index ? 'tabcur' : ''"
							v-for='(item,index) in tabList'
							:key='index'
						>
							{{ item.name }}
						</view>

					</view>
				</view>
			</view>
			<view class="apply" v-if='!edit'>
				<u-button type="primary" shape='circle' @click="submit">确 认</u-button>
			</view>
			
			<view class="flex-row-between apply" v-if='edit'>
				<u-button type="warning" shape='circle' class="halfbtn"  @click="submit">删 除</u-button>
				<u-button type="primary" shape='circle' class="halfbtn"  @click="submit">确 认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import storage from "@/utils/storage.js"; //缓存
import bottomsubmit from "@/components/huashuiwan/bottomsubmit.vue"; //导航栏模块
export default {
	data() { 
		return {
			tabIndex:0,
			tabList:[
				{ name:'家属',id:1 },
				{ name:'租户',id:1 },
				{ name:'临时人员',id:1 },
			],
			edit:null,
			bgimg:'https://www.haopengsong.xyz/static/movie/songdetail.png',
			carouselImage:[
				{ name:'https://www.haopengsong.xyz/static/movie/songbg.png'}
			],
			tel:'',
			name:'',
		};
	},
	components: {
		bottomsubmit
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		this.edit = options.edit
	},
	/**
	 * 页面显示
	 */
	onShow() {
		
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		jump(res){
			uni.navigateTo({
				url: res
			});
		},
		submit(){
			uni.switchTab({
				url:'/pages/tabbar/user/my'
			})
		}
	}
};
</script>

<style scoped lang="scss">
	.halfbtn{
		width: 48%;
	}
	.upload{
		width: 100px;
		height: 100px;
		border: 1px solid #CCCCCC;
		font-size: 30px;
		text-align: center;
		line-height: 100px;
		color: #CCCCCC;
	}
	.topinfo{
		margin-bottom: 10px;
	}
	.home{
		width: 35px;
		height: 35px;
		margin-right: 10px;
	}
	.qiehuan{
		width: 78px;
		height: 28px;
		text-align: center;
		line-height: 28px;
		border-radius: 28px;
		background-color: #499C43;
		color: #fff;
	}
	.apply{
		margin: 30px 0;
	}
	.bg-gray{
		padding-bottom: 40px;
	}
	.tab{
		padding: 5px 12px;
		border-radius: 15px;
		background-color: #F4F6F8;
		color: #2F3556;
		margin-left: 8px;
		border:1px solid #DDDDDD;
	}
	.tabcur{
		background-color: #E5F6E6;
		color: #499C43;
		border-color: #499C43;
	}
</style>